<!-- src/components/Navbar.vue -->
<template>
  <nav class="tw-py-4 tw-px-6 tw-bg-white dark:tw-bg-neutral-800 tw-shadow-sm tw-theme-transition">
    <div class="tw-container tw-mx-auto tw-flex tw-justify-between tw-items-center">
      <h1 class="tw-text-primary dark:tw-text-primary-light tw-font-bold">MyApp</h1>
      <div class="tw-flex tw-items-center tw-gap-4 tw-ml-4">
        <!-- 其他导航链接 -->
        <a
          href="/"
          class="tw-text-neutral-700 dark:tw-text-neutral-300 hover:tw-text-primary dark:hover:tw-text-primary-light tw-theme-transition"
          >首页</a
        >
        <a
          href="/about"
          class="tw-text-neutral-700 dark:tw-text-neutral-300 hover:tw-text-primary dark:hover:tw-text-primary-light tw-theme-transition"
          >关于</a
        >
      </div>
    </div>
    <!-- 主题切换按钮 -->
    <ThemeToggle />
  </nav>
</template>

<script setup lang="ts">
import ThemeToggle from './ThemeToggle.vue'
</script>
